<template>
    <div>
        <mt-header class="m_home_header" title="理财钱包">
            <router-link to="/m/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <router-link to="/m/manage-record" slot="right">
                <mt-button>历史记录</mt-button>
            </router-link>
        </mt-header>
        <div class="manage_wallet_top">
            <div>
                <p>我的资产</p>
                <p>{{$store.state.balanceManage}}</p>
            </div>
            <div>
                <p>累计收益</p>
                <p>{{fundMoney?fundMoney:0}}</p>
            </div>
        </div>

        <div class="manage_wallet_list">
            <template v-if="fundVOList.length == 0">
                <p style="text-align: center;margin-top: 2rem;">暂无数据</p>
            </template>
            <template v-else>
                <template v-for="fund in fundVOList">
<!--                    <router-link :to="{path:'/m/manage-catch',query:fund}">-->
                    <router-link
                            :to="{path:'/m/manage-catch',
                            query:{
                            id:fund.userFund.id,
                            amount:fund.userFund.amount,
                            createTime:fund.userFund.createTime,
                            targetEndTime:fund.userFund.targetEndTime,
                            name:fund.product.name,
                            penaltyRate:fund.product.penaltyRate,
                            moneyRate:fund.product.moneyRate,
                            }}"
                    >
                        <el-card>
                            <div class="manage_wallet_list_header">
                                <span>{{fund.product.name}}</span>
                                <span>{{parseInt((new Date(fund.userFund.targetEndTime).getTime() - new Date())/(60*60*24*1000))}}天后到期</span>
                                <el-button type="text" @click.native="clickExtract($event,fund)">未到期提出</el-button>
                            </div>
                            <div class="manage_wallet_list_body">
                                <span>持有数量</span>
                                <span>{{fund.userFund.amount}}</span>
                                <span>违约金{{(fund.product.penaltyRate*fund.userFund.amount)/100}}WE</span>
                            </div>
                        </el-card>
                    </router-link>

                </template>

            </template>

        </div>

    </div>
</template>

<script>

    import {MessageBox} from 'mint-ui'
    import {mapMutations,mapActions} from 'vuex'

    export default {
        name: "ManageWallet",
        data() {
            return {
                fundMoney: '',
                fundVOList: [],
                total:this.$store.state.balanceManage,
            }
        },
        mounted() {
            this.requestGetManage();
            this.refreshBalance();
        },
        methods: {
            ...mapActions(['refreshBalance']),
            requestGetManage() {
                this.requestAxios.requestWeb('post', webUserBalanceApi + '/get_fund.do', null, (response) => {
                    console.log(response);
                    this.fundMoney = response.data.fundMoney;
                    this.fundVOList = response.data.fundVOList;

                })
            },
            clickExtract(e,fund) {
                e.preventDefault();
                MessageBox.confirm("到期前取出将扣除购买额度" + fund.product.penaltyRate + "%的违约金且无法获得收益", "温馨提示",)
                    .then(() => {
                        this.requestAxios.requestWeb('post', webUserBalanceApi + '/advance_cash.do', {
                            fundId: fund.userFund.id,
                        }, (response) => {
                            console.log(response);
                            this.requestGetManage();
                            this.refreshBalance();
                        })
                    }).catch(() => {
                        this.$toast('操作取消');
                    }
                );
            }
        }
    }
</script>

<style>

    .manage_wallet_top{
        display: flex;
        justify-content: space-around;
        padding:.3rem 0;
        background: linear-gradient(#e47307,#dd5b26);
        height: 1rem;
    }

    .manage_wallet_top>div{
        text-align: center;
    }

    .manage_wallet_top>div p{
        color:#ddd;
        font-size: .22rem;
    }

    .manage_wallet_top>div p:last-child{
        color:#fff;
        font-size: .3rem;
    }

    .manage_wallet_list {
        padding: .2rem;
    }

    .manage_wallet_list .el-card{
        margin-bottom: .3rem;
    }

    .manage_wallet_list_header {
        display: flex;
        justify-content: space-between;
    }

    .manage_wallet_list_header .el-button {
        padding: .03rem .1rem;
        color: #ebac84;
        border:1px solid #ebac84;
        border-radius: .2rem;
        font-size: .22rem;
        font-weight: bold;
    }

    .manage_wallet_list_header span {
        font-weight: bold;
    }

    .manage_wallet_list_body{
        display: flex;
        justify-content: space-between;
        margin-top: .3rem;
    }

    .manage_wallet_list_body span{
        color:#666;
        font-size: .22rem;
    }
    .manage_wallet_list_body span:last-child{
        color:#f4abaa;
    }
    .manage_wallet_list .el-card__body{
        border-left: 3px solid #e07f27;
    }

    .mint-msgbox{
        border-radius: .2rem!important;
    }

    .mint-msgbox-title{
        color: #ed8207 !important;
        font-size: .3rem!important;
    }

    .mint-msgbox-message{
        line-height: .35rem!important;
        font-size: .25rem!important;
        color: #333!important;
    }

    .mint-msgbox-btn{
        background: #eef0f7 !important;
    }
</style>
